<template>
  <p-card :bordered="false" :class="'cust-erp-sub-tab'">
     <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <p-form layout="inline" @keyup.enter.native="searchQuery">
            <p-row :gutter="24">

            </p-row>
          </p-form>
        </div>
        <!-- 查询区域-END -->



    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <p-button v-if="mainId" @click="handleAdd" type="primary" icon="plus">新增</p-button>

        <template v-if="cgButtonList && cgButtonList.length>0" v-for="(item,index) in cgButtonList">
          <p-button
            v-if=" item.optType=='js' "
            :key=" 'cgbtn'+index "
            @click="cgButtonJsHandler(item.buttonCode)"
            type="primary"
            :icon="item.buttonIcon">
            {{ item.buttonName }}
          </p-button>
          <p-button
            v-else-if=" item.optType=='action' "
            :key=" 'cgbtn'+index "
            @click="cgButtonActionHandler(item.buttonCode)"
            type="primary"
            :icon="item.buttonIcon">
            {{ item.buttonName }}
          </p-button>
        </template>

      <p-dropdown v-if="selectedRowKeys.length > 0">
        <p-menu slot="overlay">
          <p-menu-item key="1" @click="batchDel"><p-icon type="delete"/>删除</p-menu-item>
        </p-menu>
        <p-button style="margin-left: 8px"> 批量操作 <p-icon type="down" /></p-button>
      </p-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <p-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :scroll='tableScroll'
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">



            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
              <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
              <p-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </p-button>
            </template>

            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">编辑</a>

              <p-divider type="vertical" />
              <p-dropdown>
                <a class="ant-dropdown-link">更多 <p-icon type="down" /></a>
                <p-menu slot="overlay">
                  <p-menu-item>
                    <p-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                      <a>删除</a>
                    </p-popconfirm>
                  </p-menu-item>
                    <template v-if="cgButtonLinkList && cgButtonLinkList.length>0" v-for="(btnItem,btnIndex) in cgButtonLinkList">
                      <p-menu-item :key=" 'cgbtnLink'+btnIndex " v-if="showLinkButton(btnItem,record)">
                        <a href="javascript:void(0);" @click="cgButtonLinkHandler(record,btnItem.buttonCode,btnItem.optType)">
                          <p-icon v-if="btnItem.buttonIcon" :type="btnItem.buttonIcon" />
                          {{ btnItem.buttonName }}
                        </a>
                      </p-menu-item>
                    </template>
                </p-menu>
              </p-dropdown>
            </span>
      </p-table>

    </div>

    <mesBcPrint-modal ref="modalForm"  :EnhanceJS="EnhanceJS"  @ok="modalFormOk" :mainId="mainId"></mesBcPrint-modal>
  </p-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import MesBcPrintModal from './modules/MesBcPrintModal'
  import ButtonExpHandler from '@/components/jeecgbiz/modules/ButtonExpHandler'
  import { postAction,getAction,deleteAction } from '@/api/manage'


  export default {
    name: "MesBcPrintList",
    mixins:[JeecgListMixin],
    components: { MesBcPrintModal },
    props:{
      mainId:{
        type:String,
        default:'',
        required:false
      }
    },
    watch:{
      mainId:{
        immediate: true,
        handler(val) {
          if(!this.mainId){
            this.clearList()
          }else{
            this.queryParam['mesBcPrintOrderId'] = val
            this.loadData(1);
          }
        }
      }
    },
    data () {
      return {
        description: '工单标签报表管理页面',
        disableMixinCreated:true,
        EnhanceJS:'',
        cgButtonLinkList: [],
        cgButtonList: [],
        code: '',
        // 表头
        columns: [
          {
            title: "序号",
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align: 'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'标签模板编号',
            align: 'center',
            dataIndex: 'labelTemplateNo',
          },
          {
            title:'标签模板名称',
            align: 'center',
            dataIndex: 'labelTemplateName',
          },
          {
            title:'工单号',
            align: 'center',
            dataIndex: 'productionno',
          },
          {
            title:'首标签条码',
            align: 'center',
            dataIndex: 'beginBarcode',
          },
          {
            title:'尾标签条码',
            align: 'center',
            dataIndex: 'endBarcode',
          },
          {
            title:'条码规则名称',
            align: 'center',
            dataIndex: 'ruleName',
          },
          {
            title:'数量',
            align: 'center',
            dataIndex: 'qty',
          },
          {
            title:'打印人',
            align: 'center',
            dataIndex: 'name',
          },
          {
            title:'打印时间',
            align: 'center',
            dataIndex: 'dt',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            },
          },
          {
            title:'创建人',
            align: 'center',
            dataIndex: 'createBy',
          },
          {
            title:'创建日期',
            align: 'center',
            dataIndex: 'createTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            },
          },
          {
            title:'更新人',
            align: 'center',
            dataIndex: 'updateBy',
          },
          {
            title:'更新日期',
            align: 'center',
            dataIndex: 'updateTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            },
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: '/mes-code/auto/mesBcPrintOrder/listMesBcPrintByMainId',
          delete: '/mes-code/auto/mesBcPrintOrder/deleteMesBcPrint',
          deleteBatch: '/mes-code/auto/mesBcPrintOrder/deleteBatchMesBcPrint',
          getColumns: '/mes-code/online/cgform/api/getColumns/',
          buttonAction: '/mes-code/online/cgform/api/doButton',
        },
        dictOptions:{
         alreadyPrint: [],
        },

      }
    },

    computed:{
      tableScroll:function(){
        if(this.columns.length > 12){
          return { x: this.columns.length*160+40 }
        }
      }
    },

    created() {
      this.setdefColumns();
      this.initButtonList();
    },
    methods: {
      setdefColumns(){
        if(this.columns.length > 12){
          let arrLength = this.columns.length-1
          this.columns[arrLength]['fixed'] = 'right'
          this.columns[arrLength]['width'] = 200
          this.columns[0]['width'] = 70
          this.columns[0]['fixed'] = 'left'
        }
      },

      clearList(){
        this.dataSource=[]
        this.selectedRowKeys=[]
        this.ipagination.current = 1
      },
        //2020/7/9
        initDictConfig(){
        },
          showLinkButton(item,record){
              let btn = new ButtonExpHandler(item.exp,record);
              return btn.show;
          },
        initButtonList(){
                  getAction(`${this.url.getColumns}8ac49ec7733bce4801734602d1630080`).then((res)=>{
                    console.log("--获取自定义按钮->>",res);
                    if(res.success){
                      this.code = res.data.code;
                      this.initCgButtonList(res.data.cgButtonList)
                      this.initCgEnhanceJs(res.data.enhanceJs)
                    }else{
                      this.$message.warning(res.msg)
                    }
                  })
                },
                initCgEnhanceJs(enhanceJs){
                  //console.log("--onlineList-js增强",enhanceJs)
                  if(enhanceJs){
                    let Obj = eval ("(" + enhanceJs + ")");
                    this.EnhanceJS = new Obj(getAction,postAction,deleteAction);
                    this.cgButtonJsHandler('created')
                  }else{
                    this.EnhanceJS = ''
                  }
                },
                initCgButtonList(btnList){
                  let linkArr = []
                  let buttonArr = []
                  if(btnList && btnList.length>0){
                    for(let i=0;i<btnList.length;i++){
                      let temp = btnList[i]
                      if(temp.buttonStyle=='button'){
                        buttonArr.push(temp)
                      }else if(temp.buttonStyle=='link'){
                        linkArr.push(temp)
                      }
                    }
                  }
                  this.cgButtonLinkList = [...linkArr]
                  this.cgButtonList=[...buttonArr]
                  console.log("链接增强", this.cgButtonLinkList);
                },
                cgButtonJsHandler(buttonCode){
                  if(this.EnhanceJS[buttonCode]){
                    this.EnhanceJS[buttonCode](this)
                  }
                },
                cgButtonActionHandler(buttonCode){
                  //处理自定义button的 需要配置该button自定义sql
                  if(!this.selectedRowKeys || this.selectedRowKeys.length==0){
                    this.$message.warning("请先选中一条记录")
                    return false
                  }
                  if(this.selectedRowKeys.length>1){
                    this.$message.warning("请只选中一条记录")
                    return false
                  }
                  let params = {
                    formId:this.code,
                    buttonCode:buttonCode,
                    dataId:this.selectedRowKeys[0]
                  }
                  console.log("自定义按钮请求后台参数：",params)
                  postAction(this.url.buttonAction,params).then(res=>{
                    if(res.success){
                      this.loadData()
                      this.$message.success("处理完成!")
                    }else{
                      this.$message.warning("处理失败!")
                    }
                  })

                },
                cgButtonLinkHandler(record,buttonCode,optType){
                  if(optType=="js"){
                    if(this.EnhanceJS[buttonCode]){
                      this.EnhanceJS[buttonCode](this,record)
                    }
                  }else if(optType=="action"){
                    let params = {
                      formId:this.code,
                      buttonCode:buttonCode,
                      dataId:record.id
                    }
                    console.log("自定义按钮link请求后台参数：",params)
                    postAction(this.url.buttonAction,params).then(res=>{
                      if(res.success){
                        this.loadData()
                        this.$message.success("处理完成!")
                      }else{
                        this.$message.warning("处理失败!")
                      }
                    })
                  }
                },
        }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>
